@import url("../../styles/config.less");

@keyframes play-pause {
  0% {
    visibility: visible;
    font-size: 50px;
    opacity: 0;
  }
  80% {
    font-size: 70px;
    opacity: 0.9;
  }

  100% {
    font-size: 80px;
    opacity: 0;
    visibility: hidden;
  }
}

.home-page {
  font-size: @fs-15;
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;

  .section {
    width: 830px;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: @bg-white;
  }

  .aside {
    width: 350px;
  }

  .section .ul-box {
    display: flex;
    padding: 16px 0;
    font-size: @fs-16;
    box-sizing: border-box;
  }

  .section .ul-box .li {
    margin-right: 30px;
    cursor: pointer;
  }

  .ul-content {
    width: 100%;
  }

  .ul-content .li {
    padding: 16px 0;
    border-top: 1px solid @border-color-gray-dark;
  }

  .ul-content .li .img-box {
    position: relative;
    width: 190px;
    margin-right: 16px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
  }

  .ul-content .li .video-box::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .ul-content .li .video-box::after {
    content: "";
    position: absolute;
    left: calc(50% + 7px);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    border: 10px solid transparent;
    border-left: 15px solid rgb(68, 68, 68);
  }

  .ul-content .li .content-box {
    display: flex;
  }

  .ul-content .li .oper {
    padding-top: 10px;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .ul-content .li .oper .pick-up {
    cursor: pointer;
    color: @link-blue;
  }

  .ul-content .li .oper .pick-up:hover {
    color: @hover-gray;
  }

  .ul-content .li .title {
    margin-bottom: 16px;
    font-size: @fs-20;
    cursor: pointer;
    font-weight: 700;
  }

  .ul-content .li .title:hover {
    color: @hover-blue-deep;
  }

  .ul-content .li .oper .text {
    margin: 0 12px;
    cursor: pointer;
  }

  .ul-content .li .content {
    cursor: pointer;
    color: #1a1a1a;
    width: 100%;
    line-height: 1.5;
  }

  .ul-content .li .content img {
    max-width: 100%;
    border-radius: 4px;
  }

  // .ul-content .li .content:hover {
  //   color: @hover-gray;
  // }

  .ul-content .li .hover-color:hover {
    color: @hover-gray;
  }

  .ul-content .li .all-content {
    color: @link-blue;
  }

  // .ul-content .li .content-vedio:hover {
  //   color: @link-blue;
  // }

  .ul-content .li .all-content:hover {
    color: @hover-gray;
  }

  .ul-content .li .oper .agree {
    padding: 6px 10px;
    margin: 0;
    color: @blue;
    background-color: @bg-blue-dark;
  }

  .ul-content .li .agree:hover {
    background-color: @hover-blue-dark;
  }

  .ul-content .li .text .iconfont {
    position: relative;
    line-height: 1.5;
    top: 1px;
  }

  .video-play-box {
    width: 100%;
    text-align: center;
  }

  .video-play-box .play-box {
    position: relative;
  }

  .video-play-box .play-box .iconfont {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    // transition: font-size 0.7s, opacity 0.4s;

    font-size: 50px;
    color: #fff;
  }

  .video-play-box .play-box .hide {
    visibility: hidden;
  }

  .video-play-box .play-box .iconbofang1-none {
    animation: play-pause 0.4s;
  }

  .video-play-box .play-box .iconzanting-none {
    animation: play-pause 0.4s;
  }

  .video-play-box .video {
    max-width: 100%;
    max-height: 500px;
  }

  .video-play-box .text {
    line-height: 1.5;
    text-align: left;
    padding-top: 10px;
  }

  .comment-box {
    width: 100%;
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
    padding: 0 20px;
    box-sizing: border-box;
  }

  .comment-box .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    margin-top: 20px;
  }

  .comment-box .title-box .left {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
  }

  .comment-box .title-box .iconfont {
    font-size: 14px;
    color: @gray;
  }

  .comment-box .jx-conmment {
    padding: 18px 20px;
    width: 100%;
    font-size: @fs-15;
    background-color: @bg-gray-dark;
    box-sizing: initial;
    position: relative;
    left: -20px;
  }

  .comment-box .item {
    display: flex;
    // align-items: center;
    width: 100%;
  }

  .comment-box .item .img-box {
    width: 24px;
    height: 24px;
    background-color: pink;
    margin-top: 8px;
  }

  .comment-box .item .text-box {
    flex: 1;
    padding: 10px 0;
    font-size: @fs-15;
  }

  .comment-box .item .text-box .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .comment-box .item .text-box .middle {
    width: 100%;
    padding: 16px 0;
  }

  .comment-box .item .text-box .bottom {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .comment-box .item .text-box .bottom span {
    margin-right: 20px;
    cursor: pointer;
  }

  .comment-box .item .text-box .bottom .self-oper {
    opacity: 0;
    transition: opacity 0.3s;
  }

  .comment-box .item:hover .text-box .bottom .self-oper {
    opacity: 1;
  }

  .comment-box .comment-release {
    padding: 20px 0;
    border-top: 1px solid @border-color-gray-dark;
  }

  // page-home
}

// 展开全部时页面底部显示操作
.oper-fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: height 0.3s ease;
}

.oper-fixed-box-show {
  height: 53px;
}

.oper-fixed-box .oper-fixed {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}

.oper-fixed-box .oper-fixed-content {
  width: 830px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 14px 20px;
  background-color: @bg-white;
  box-shadow: 0 -1px 3px rgba(26, 26, 26, 0.1);
}

.oper-fixed-box .oper-fixed .oper {
  display: flex;
  align-items: center;
}

.oper-fixed-box .oper-fixed .text {
  margin: 0 12px;
  cursor: pointer;
}

.oper-fixed-box .oper-fixed .agree {
  padding: 6px 10px;
  margin: 0;
  color: @blue;
  background-color: @bg-blue-dark;
  border-radius: 2px;
}

.oper-fixed-box .oper-fixed .agree:hover {
  background-color: @hover-blue-dark;
}

.oper-fixed-box .oper-fixed .pick-up {
  cursor: pointer;
  color: @link-blue;
}

.oper-fixed-box .oper-fixed .pick-up:hover {
  color: @hover-gray;
}
